<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
 <!--    <link href="../css/common.css" rel="stylesheet"> -->
    <style>
        .border_S{
            border-bottom:1px solid #ccc;
        }
        .row{margin:0;}
        .tanchuk_w{width: 780px}
        .clearFix::after {
            content: ".";
            clear: both;
            display: block;
            overflow: hidden;
            font-size: 0;
            height: 0;
        }
        
        .clearFix {
            zoom: 1;
        }
         .addSpan {
            padding: 0px 4px;
            background: #f66;
            display: inline-block;
            border-radius: 12px;
            margin: 10px;
            cursor: pointer;
            font-size: 14px
        } 
        .div_H {
            min-height: 50px;
             }
        .col-md-2>.labelTxt {
            width: 120px;
            margin-bottom: 0;
            display: inline-block;
            line-height: 30px;
            border-right: 1px solid #ccc;
            text-align: right;
            padding-right: 10px;
            margin-left: 32px
        }
        .col-md-2>.labelTxt1 {
            width: 120px;
            margin-bottom: 0;
            display: inline-block;
            line-height: 100px;
            border-right: 1px solid #ccc;
            text-align: right;
            padding-right: 10px;
            margin-left: 32px
        }
        .select1 {
            margin-left: 15px;
            display: inline-block;
            width: 150px;
            font-size: 12px;
        }  
        select.form-control {
            height: 22px;
            padding: 0 12px 1px;
        } 
        .textArea{
            width: 300px;
            height: 60px;
            user-select:none;
            display: inline-block;
            vertical-align: middle;
        } 
        #hello,#hello1{display: inline-block;} 
        .colorRed{color: red} 
    </style>

</head>

<body class="white-bg">
    <div class="row  border-bottom white-bg">
        <div class="col-md-12 border_S border_L border_R div_H" style="padding: 0">
            <div class="col-md-12 border_S overFlow" style="background: #d0e0e0;line-height: 30px;text-align:center; font-size:18px;color:#333;font-size:16px">
                <span>添加销售机会</span>
            </div>
            <div class="row white-bg clearfix border_S">
                <div class="col-md-2" style="float: left;">
                    <label for="" class="labelTxt">事件类型：</label>
                    <span>销售机会</span>
                </div>
                <div class="col-md-2" style="float: left;">
                    <label for="" class="labelTxt border_L">执行人</label>
                    <span class="addSpan">张强&times;</span>
                </div>
            </div>
            <div class="row white-bg clearfix border_S">
                <div class="col-md-2">
                    <label for="" class="labelTxt">事件主题<span class="colorRed">*</span>：</label>
                    <input type="text" class="form-control" style="width: 240px;height: 22px;display: inline-block;">
                </div>
            </div>
            <div class="row white-bg clearfix border_S">
                <div class="col-md-2">
                    <label for="" class="labelTxt">重要程度<span class="colorRed">*</span>：</label>
                     <input type="radio" name="optionsRadios1" id="optionsRadios3" value="option1" checked style="margin-left: 15px">高
                     <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option2" checked>中
                     <input type="radio" name="optionsRadios1" id="optionsRadios5" value="option2" checked>低
                </div>
            </div>
             <div class="row white-bg clearfix border_S">
                <div class="col-md-2" style="float: left;">
                    <label for="" class="labelTxt">客户名称：</label>
                    <span>金毛科技有限</span>
                </div>
                <div class="col-md-2" style="float: left;">
                   <label for="" class="labelTxt border_L">客户联系人：</label>
                   <select name="" id="" class="form-control select1">
                        <option value="0">请选择</option>
                   </select>
                </div>
            </div>
             <div class="row white-bg clearfix border_S">
                <div class="col-md-2">
                    <label for="" class="labelTxt1">事件明细：</label>
                    <textarea name="" id="" class="textArea form-control" style="resize: none;"></textarea>(600)
                </div>
            </div>
             <div class="row white-bg clearfix border_S">
                <div class="col-md-2">
                 <label for="" class="labelTxt">事件起止时间<span class="colorRed">*</span></label>
                  从<input type="text" id="hello" class="laydate-icon form-control layer-date" style="width: 150px;height: 22px;margin-top:-4px;margin-left: 15px">至
                    <input type="text" id="hello1" class="laydate-icon form-control layer-date" style="width: 150px;height: 22px;margin-top:-4px;margin-left: 15px">
                </div>
            </div>
            <div class="row white-bg clearfix border_S">
                <div class="col-md-2">
                 <label for="" class="labelTxt">状态<span class="colorRed">*</span></label>
                   <input type="radio" name="optionsRadios1" id="optionsRadios31" value="option1" checked style="margin-left: 15px">尚未开始
                     <input type="radio" name="optionsRadios1" id="optionsRadios42" value="option2" checked>正在进行
                     <input type="radio" name="optionsRadios1" id="optionsRadios53" value="option2" checked>已经完成
                     <input type="radio" name="optionsRadios1" id="optionsRadios64" value="option2" checked>已延期
                </div>
            </div>
             <div class="row white-bg clearfix border_S">
                <div class="col-md-2">
                 <label for="" class="labelTxt">提醒时间</label>
                   <input type="radio" name="optionsRadios1" id="optionsRadios311" value="option1" checked style="margin-left: 15px">提前一天提醒
                     <input type="radio" name="optionsRadios1" id="optionsRadios422" value="option2" checked>提前一小时提醒
                     <input type="radio" name="optionsRadios1" id="optionsRadios533" value="option2" checked>同事件开始时间
                </div>
            </div>
               <div class="row white-bg clearfix border_S">
                <div class="col-md-2">
                 <label for="" class="labelTxt">提醒类型</label>
                   <input type="checkbox" name="optionsRadios1" id="optionsRadios7" value="option1" checked style="margin-left: 15px">弹窗提醒
                     <input type="checkbox" name="optionsRadios1" id="optionsRadios8" value="option2" checked>Email提醒
                </div>
            </div>
            <div class="row white-bg border_S" style="text-align: center;">
                    <button class="btn btn-primary" style="margin:10px">提交</button>
            </div>
        </div>
    </div>
    </div>


    <!-- 全局js -->
    {include file="Public/footer"}
    <script src="../js/plugins/layer/layer.min.js"></script>
     <script src="../js/plugins/layer/laydate/laydate.js"></script>
    <!-- 自定义js -->
    <script>
         //外部js调用
        laydate({
            elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });
          laydate({
            elem: '#hello1', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });
        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function(datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function(datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>
</body>

</html>